<template>
  <el-dialog
      v-model="dialogVisible"
      title="党费缴纳"
      width="550px"
      custom-class="party-fee-dialog"
      @close="handleClose"
  >
    <el-form
        ref="formRef"
        :model="form"
        label-width="80px"
        :rules="rules"
        label-position="top"
    >
      <el-form-item label="选择党员" prop="cpcUserId">
        <el-select v-model="form.cpcUserId" placeholder="请选择党员" clearable class="w-full">
          <el-option v-for="item in memberOptions" :key="item.id" :label="item.pbUserName" :value="item.id"/>
        </el-select>
      </el-form-item>


      <el-form-item label="缴费方式" prop="pbFeeMethod" style="font-weight: bolder">
        <div class="payment-method-buttons flex justify-content-space-between" style="width: 100%">
          <el-button :class="{ 'is-checked': form.pbFeeMethod == 1 }" @click="form.pbFeeMethod = 1" style="width: 150px;height: 50px;">
            <img src="../../../../assets/smart/现金.png" alt="现金" class="mr-2" />现金
          </el-button>

          <el-button :class="{ 'is-checked': form.pbFeeMethod == 2 }" @click="form.pbFeeMethod = 2"  style="width: 150px;height: 50px;">
            <img src="../../../../assets/smart/微信.png" alt="微信" class="mr-2" />微信
          </el-button>

          <el-button :class="{ 'is-checked': form.pbFeeMethod == 3 }" @click="form.pbFeeMethod = 3"  style="width: 150px;height: 50px;">
            <img src="../../../../assets/smart/支付宝.png" alt="支付宝" class="mr-2" />支付宝
          </el-button>
        </div>
      </el-form-item>

      <el-form-item label="缴费金额" prop="pbfFeeLimit">
        <el-input
            v-model="form.pbfFeeLimit"
            placeholder="请输入金额"
            prefix-icon="el-icon-yen"
            class="w-full"
        />
      </el-form-item>

      <el-form-item label="缴费时间" prop="pbFeeTime">
        <el-date-picker v-model="form.pbFeeTime" type="datetime" style="width: 100%"   value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" />
      </el-form-item>

      <el-form-item label="备注说明">
        <el-input
            v-model="form.pbfFeeRemarks"
            type="textarea"
            placeholder="选填"
            rows="3"
            class="w-full"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer flex justify-content-end ">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          <i class="el-icon-check mr-1"></i>确认缴费
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineEmits, defineProps, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {createPBFee, getPBFeeInfo} from "@/api/cost/cost.js";
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  memberOptions: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:visible', 'confirm'])

const dialogVisible = ref(props.visible)
const formRef = ref(null)

const form = ref({
  cpcUserId: '', // 党员id
  pbFeeMethod: 1,
  pbfFeeLimit: null,
  pbFeeTime: '', // 默认时间
  pbfFeeRemarks: ''
})

const rules = ref({
  cpcUserId: [
    { required: true, message: '请选择党员', trigger: 'change' }
  ],
  pbfFeeLimit: [
    { required: true, message: '请输入缴费金额', trigger: 'blur' },
    { pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: '金额格式不正确，最多两位小数', trigger: 'blur' }
  ],
  pbFeeTime: [
    { required: true, message: '请选择缴费时间', trigger: 'change' }
  ]
})

watch(() => props.visible, (val) => {
  dialogVisible.value = val
  // 当对话框打开时，重置表单
  if (val) {
    resetForm()
  }
})

watch(dialogVisible, (val) => {
  emit('update:visible', val)
  // 当对话框关闭时，重置表单和验证
  if (!val) {
    setTimeout(() => {
      resetForm()
      clearValidation()
    }, 300) // 延迟确保对话框完全关闭后再重置
  }
})

// 重置表单到初始状态
const resetForm = () => {
  form.value = {
    cpcUserId: '',
    pbFeeMethod: 1,
    pbfFeeLimit: null,
    pbFeeTime: '',
    pbfFeeRemarks: ''
  }
}

// 清除表单验证
const clearValidation = () => {
  formRef.value?.clearValidate()
}

const handleClose = () => {
  dialogVisible.value = false
  resetForm()
  clearValidation()
}

const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let result = await createPBFee(form.value);
      let data = result.data.data;
      if (result.status == 200 && result.data.code == 200) {
        handleClose()
        ElMessage.success('缴费信息提交成功')
      } else {
        ElMessage({type: 'error', message: '缴费信息提交失败！'});
      }

    } else {
      ElMessage.error('请完善缴费信息')
      return false
    }
  })
}
</script>


<style scoped>
.mr-2{
   margin-right: 5px;
  width: 20px;
}

/* 图标样式 */
.payment-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

/* 按钮基础样式 */
.payment-method-buttons .el-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  transition: all 0.3s ease;
}

/* 选中状态样式 */
.payment-method-buttons .el-button.is-checked {
  border-color: #ff0000; /* 蓝色边框表示选中 */
  background-color: #fdebed; /* 浅蓝色背景 */
  color: #000000; /* 蓝色文字 */
  font-weight: 500;
}

/* 鼠标悬停效果 */
.payment-method-buttons .el-button:not(.is-checked):hover {
  border-color: #c9cdD4;
  background-color: #f9fafb;
}
</style>
